class Lunbo{
    // class中 在new的时候会调用constructor函数
    // 原型中的其他方法是不会被调用的
    constructor(obj){
        // console.log(obj);
        this.obj = {...obj};
        this.index = 0;
        // 需要手动调用原型中的方法
        // 通过当前示例对象this.原型中的函数名();
        this.createUl();
        if(obj.yStyle) this.createOl();
        if(obj.pNext) this.createSpan();
        
    }
    // 创建标签的函数
    createUl(){
        // console.log(this.obj);
        // console.log(this.obj.ele);
        // 获取box
        var {ele,images} = this.obj;
        var box = document.getElementById(ele);
        box.style = "position: relative;"
        // console.log(box);

        // 创建ul
        var ul = document.createElement("ul");
        ul.style = "display: flex;position: relative;left: 0;"
        box.appendChild(ul);

        // 创建li>img
        var ulLIst = "";
        for(var i = 0;i < images.length;i++){
            ulLIst += `<li><img src="${images[i]}" /></li>`
        }
        ul.innerHTML = ulLIst;
        ul.style.width = box.offsetWidth * images.length + "px";
        var imgs = box.getElementsByTagName("img")
        var lis = box.querySelectorAll("ul > li");
        console.log(imgs);
        for(var j = 0;j < imgs.length;j++){
            imgs[j].style = "display: block;width: 100%;"
            lis[j].style.width = box.offsetWidth + "px";
            lis[j].style.listStyle = "none";
        }

    }

    createOl(){
        // 获取box
        var {ele,images} = this.obj;
        var box = document.getElementById(ele);
        // console.log(box);
         // 创建ol  ol>li
         var ol = document.createElement("ol");
         ol.style = "display: flex;position: absolute;bottom: 10px; width: 100%;left: 0;justify-content: center;"
         box.appendChild(ol);
 
         var olLIst = "";
         for(var k = 0;k < images.length;k++){
             olLIst += `<li></li>`;
         }
         ol.innerHTML = olLIst;
         var lis = box.querySelectorAll("ol > li");
        //  console.log(lis);
         for(var j = 0;j < lis.length;j++){
            lis[j].style = "list-style: none;width: 10px;height: 10px;background-color: #fff;margin: 0 8px;"
            if(j == 0){
                lis[j].style.backgroundColor = "red";
            }
        }
    }

    createSpan(){
        var {ele,images} = this.obj;
        var box = document.getElementById(ele);
        var span1 = document.createElement("span");
        span1.innerHTML = "上一张";
        var span2 = document.createElement("span");
        span2.innerHTML = "下一张";
        box.appendChild(span1);
        box.appendChild(span2);
        span1.style = "border: 1px solid #000;padding:0 10px;position: absolute;line-height: 40px;top: calc(50% - 20px);background-color: rgba(255, 255, 255, 0.595);left: 0;";
        span2.style = "border: 1px solid #000;padding:0 10px;position: absolute;line-height: 40px;top: calc(50% - 20px);background-color: rgba(255, 255, 255, 0.595);right: 0;";
        span1.onclick = this.prev.bind(this);
        span2.onclick = this.next.bind(this);
    }

    prev(){
        this.index--;
        var {images} = this.obj;
        if(this.index < 0) this.index = images.length - 1;
        this.ulLeft()
    }
    next(){
        this.index++;
        var {images} = this.obj;
        if(this.index == images.length) this.index = 0;
        this.ulLeft()
    }

    // 设置ul移动的函数
    ulLeft(){
        var {ele} = this.obj;
        var box = document.getElementById(ele);
        var ul = box.querySelector("ul");
        // ul.style.transitionDuration = "0.2s";
        var l = this.index * -box.offsetWidth;
        ul.style.left = l + "px";
    }

}